<template>
  <div class="checking">
    <div class="query-container">
      <div style="padding-left: 40px; margin-bottom: 20px;">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          text-color="var(--prev-color-text-regular)"
          active-text-color="var(--prev-color-primary)">
          <el-menu-item index="1">经销商直发</el-menu-item>
          <el-menu-item index="2">干线直发</el-menu-item>
          <el-menu-item index="3">OEM直发</el-menu-item>
        </el-menu>
      </div>
      <el-form inline label-width="90px">
        <el-form-item label="发货时间" :required="true">
          <el-date-picker
            v-model="fromTime"
            style="width: 226px"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            clearable
            @change="fromTimeGive">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="承运方">
          <el-select v-model="params.supplierCompanyId" placeholder="请选择" style="width: 226px" @change="carrierChange" clearable>
            <el-option
              v-for="(item,index) in carrierOptions"
              :key="index"
              :label="item.name"
              :value="item.supplierCompanyId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="CDC仓库" v-if="activeIndex == 1 || activeIndex == 2">
          <el-select v-model="params.fromShortName" placeholder="请选择" style="width: 226px" clearable>
            <el-option
              v-for="item in CDCoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="OEM供应商" v-if="activeIndex == 3">
          <el-select v-model="oemGysCode" placeholder="请选择" @change="oemChange" style="width: 226px" clearable>
            <el-option
              v-for="(item,index) in OEMoptions"
              :key="index"
              :label="item.name"
              :value="item.oemGysCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width:202px;float: right">
          <el-button type="primary"
                     icon="el-icon-search"
                     @click="search(1)">查询</el-button>
          <el-button type="primary"
                     icon="el-icon-delete"
                     @click="resetForm">清除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom-container">
      <el-form style="float: left;
              padding-left: 20px;
              box-sizing: border-box;
              height:54px"
              :style="activeIndex == 2?'width:70%':'width:100%'">
        <el-form-item style="float: left" v-if="activeIndex == 2">
          <span>运单维度</span>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="default"
                     icon="el-icon-s-promotion"
                     @click="handleExport(1)">导出</el-button>
        </el-form-item>
      </el-form>
      <el-form v-if="activeIndex == 2" 
              style=" width:30%;
              float: right;
              padding-left: 20px;
              box-sizing: border-box;
              height:54px">
        <el-form-item style="float: left">
          <span>仓库维度</span>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="default"
                     icon="el-icon-s-promotion"
                     @click="handleExport(2)">导出</el-button>
        </el-form-item>
      </el-form>
      <div style="height: 90%;">
        <el-table class="table-container"
                :class="activeIndex == 2?'table-left':''"
                stripe
                border
                :data="tableData"
                v-loading="loading"
                element-loading-text="加载中"
                element-loading-spinner="el-icon-loading"
                show-summary
                :summary-method="getSummaries"
                @sort-change="sortChange">
            <el-table-column
            v-for="(column, index) in columns"
              :key="index"
              :prop="column.prop"
              :label="column.name"
              :width="column.width"
              :min-width="column.minWidth?column.minWidth:''"
              :align="column.align?column.align:'right'"
              :sortable="column.sortable?'custom':false"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{transition(scope.row[column.prop],column.props)}}</span>
              </template>
            </el-table-column>
        </el-table>
        <el-table class="table-container"
                  stripe
                  border
                  style="width:30%;float:left;"
                  :data="tableDatas"
                  v-loading="loading"
                  element-loading-text="加载中"
                  element-loading-spinner="el-icon-loading"
                  show-summary
                  :summary-method="getWarehouse"
                  @sort-change="sortChanges"
                  v-if="activeIndex == 2">
            <el-table-column
            v-for="(column, index) in columnss"
              :key="index"
              :prop="column.prop"
              :label="column.name"
              :width="column.width"
              :align="column.align?column.align:'right'"
              :sortable="column.sortable?'custom':false"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{transition(scope.row[column.prop],column.props)}}</span>
              </template>
            </el-table-column>
        </el-table>
      </div>
      <span v-show="tableData.length > 0" 
            style="color: var(--prev-color-primary);">说明:由于四舍五入的原因，本页合计和总合计可能存在误差。</span>
      <el-pagination v-show="tableData.length > 0"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     :page-sizes="pageSizeOptions"
                     :page-size.sync="pageSize"
                     :current-page.sync="pageNo"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script src="./rmsJs/Checking.js"></script>

<style scoped>
.table-container >>> .el-table__body-wrapper {
  height: calc(100% - 168px);
  overflow-y: auto;
}
.bottom-container >>> .el-pagination {
  margin-top: 20px;
  /* text-align: right; */
}
.bottom-container >>> .el-table tr {
  background-color: var(--prev-bg-white);
  height: 50px;
  font-size: 14px;
}
.checking >>> .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: 1px solid var(--prev-border-color-lighter);
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  opacity: 1;
}
</style>
<style lang="scss" scoped>
.checking {
  width: 100%;
  height: 100%;
  .query-container {
    padding: 20px 20px 20px 0;
    background: var(--prev-bg-white);
  }
  .bottom-container {
    padding: 20px;
    margin-top: 12px;
    background: var(--prev-bg-white);
    height: calc(100vh - 320px);
    overflow: hidden;

    .table-container {
      height: 87%;
      .target-power {
        display: flex;
        .power {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .table-left {
    width:70%;float:left;border:1px solid var(--prev-border-color-lighter);
  }
}
</style>
